<template>
	<view class="watch-record-card">
		<view class="date u-m-b-8">{{ record.createtime }}</view>
		<view class="desc u-m-b-8">
			观看至：<text class="title">{{ record.info_name || '' }}</text>
		</view>
		<view class="course u-m-b-8">课程：{{ record.category_name || '' }}</view>
		<view class="actions">
			<view class="catalog-btn u-flex u-flex-center u-flex-items-center" @click="$emit('showCatalog')">课程目录</view>
			<view class="continue-btn u-flex u-flex-center u-flex-items-center" @click="$emit('continue')">继续学习</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			record: Object
		}
	}
</script>

<style lang="scss">
.watch-record-card {
	background: #F5F4F9;
	border-radius: 20rpx;
	padding: 30rpx;
	.date {
		color: #aaa;
		font-size: 24rpx;
	}
	.desc {
		margin: 10rpx 0;
		font-size: 28rpx;
	}
	.title {
		font-weight: bold;
	}
	.course {
		color: #888;
		font-size: 24rpx;
	}
	.actions {
		display: flex;
		justify-content: flex-end;
		margin-top: 20rpx;
		.catalog-btn {
			border: 1px solid #1976ff;
			color: #1976ff;
			background: #fff;
			margin-right: 20rpx;
			border-radius: 2430rpx;
			padding:6rpx 26rpx;
			font-size: 24rpx;
		}
		.continue-btn {
			background: #1976ff;
			color: #fff;
			border-radius: 30rpx;
			padding: 6rpx 26rpx;
			font-size: 24rpx;
		}
	}
}
</style>